<%--
  Created by IntelliJ IDEA.
  User: wjc
  Date: 2021/4/11
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <title>橡树科技－JavaDemoSystem</title>
    <link type="text/css" rel="stylesheet" media="all" href="/static/styles/global.css" />
    <link type="text/css" rel="stylesheet" media="all" href="/static/styles/global_color.css" />
    <script language="javascript" type="text/javascript">

        $(document).ready(function(){
            $("input[name='name']").blur(function(){
                var name = this.value;
                var data = {"name":name};
                $.ajax({
                    url:'${pageContext.request.contextPath}/fee/check',
                    type:'GET',
                    contentType:"application/x-www-form-urlencoded",
                    data:data,
                    success:function(ret){
                        if(ret.code == 0){
                            $("#checkName")[0].style.color="green";
                        }else {
                            $("#checkName")[0].style.color="red";
                            $("input[name='name']").focus();
                        }
                        $("#checkName").text(ret.message);

                    }
                });
            });
        });
        /*//保存结果的提示
        function showResult() {
            showResultDiv(true);
            window.setTimeout("showResultDiv(false);", 3000);
        }
        function showResultDiv(flag) {
            var divResult = document.getElementById("save_result_info");
            if (flag)
                divResult.style.display = "block";
            else
                divResult.style.display = "none";
        }
*/
        //切换资费类型
        function feeTypeChange(type) {
            var inputArray = document.getElementById("main").getElementsByTagName("input");
            if (type == 1) {
                inputArray[4].readOnly = true;
                inputArray[4].value = "";
                inputArray[4].className += " readonly";
                inputArray[5].readOnly = false;
                inputArray[5].className = "width100";
                inputArray[6].readOnly = true;
                inputArray[6].className += " readonly";
                inputArray[6].value = "";
            }
            else if (type == 2) {
                inputArray[4].readOnly = false;
                inputArray[4].className = "width100";
                inputArray[5].readOnly = false;
                inputArray[5].className = "width100";
                inputArray[6].readOnly = false;
                inputArray[6].className = "width100";
            }
            else if (type == 3) {
                inputArray[4].readOnly = true;
                inputArray[4].value = "";
                inputArray[4].className += " readonly";
                inputArray[5].readOnly = true;
                inputArray[5].value = "";
                inputArray[5].className += " readonly";
                inputArray[6].readOnly = false;
                inputArray[6].className = "width100";
            }
        }
    </script>
</head>
<body>
<div id="header"> <img src="/static/images/logo.png" alt="logo" class="left"/> <a href="/logout">[退出]</a> </div>
<div id="navi">
    <ul id="menu">
        <li><a href="${pageContext.request.contextPath}/index" class="index_on"></a></li>
        <c:forEach items="${list}" var="c">
            <li><a href="${pageContext.request.contextPath}/${c.url}" class="index_on"></a></li>
        </c:forEach>
        <li><a href="user/user_info.html" class="information_off"></a></li>
        <li><a href="user/user_modi_pwd.html"  class="password_off"></a></li>
    </ul>
</div>
<div id="main">
    <div id="save_result_info" class="save_fail">保存失败，资费名称重复！</div>
    <form action="/fee/add" method="post" class="main_form">
        <div class="text_info clearfix"><span>资费名称：</span></div>
        <div class="input_info">
            <input type="text" placeholder="50长度的字母、数字、汉字和下划线的组合" class="width300" name="name" value=""/>
            <span class="required">*</span><span id="checkName"></span>
        </div>
        <div class="text_info clearfix"><span>资费类型：</span></div>
        <div class="input_info fee_type">
            <input type="radio" name="costType" value="1" id="monthly" onClick="feeTypeChange(1);"/>
            <label for="monthly">包月</label>
            <input type="radio" name="costType" value="2" checked="checked" id="package" onClick="feeTypeChange(2);"/>
            <label for="package">套餐</label>
            <input type="radio" name="costType" value="3" id="timeBased" onClick="feeTypeChange(3);"/>
            <label for="timeBased">计时</label>
        </div>
        <div class="text_info clearfix"><span>基本时长：</span></div>
        <div class="input_info">
            <input type="text" name="baseDuration" placeholder="1-600之间的整数" value="" class="width150"/>
            <span class="info">小时</span> <span class="required">*</span>
        </div>
        <div class="text_info clearfix"><span>基本费用：</span></div>
        <div class="input_info">
            <input type="text" name="baseCost" placeholder="0-99999.99之间的数值" value="" class="width150"/>
            <span class="info">元</span> <span class="required">*</span>
        </div>
        <div class="text_info clearfix"><span>单位费用：</span></div>
        <div class="input_info">
            <input type="text" name="unitCost" placeholder="0-99999.99之间的数值" value="" class="width150"/>
            <span class="info">元/小时</span> <span class="required">*</span>
        </div>
        <div class="text_info clearfix"><span>资费说明：</span></div>
        <div class="input_info_high">
            <textarea name="desr" placeholder="100长度的字母、数字、汉字和下划线的组合" class="width300 height70"></textarea>
        </div>
        <div class="button_info clearfix">
            <input type="submit" value="保存" class="btn_save"/>
            <input type="button" value="取消" class="btn_save" onclick="location.href='/fee/list';"/>
        </div>
    </form>
</div>
<div id="footer"> <span>[源自橡树的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span> <br/>
    <span>版权所有(C)橡树信息科技有限公司 </span> </div>
</body>
</html>